<template>
  <div class="customer-record">
    <div class="product-header"
      style="padding: 10px 0;margin-bottom: 24px">

      <span style="font-style: normal;"
        class="big_title_style"> RFM结论
        <span style="font-weight: bold; margin-left: 24px; font-size: 24px;color: #839890">{{ fourData.costName }}</span>
      </span>
    </div>
    <div class="show-rfm-content">
      <div class="show-num-data">
        <div class="item-rfm-box">
          <div class="item-rfm-box-label">(R)最近一次消费评分</div>
          <div class="item-rfm-box-value"
            style="color: #E00065">{{ fourData.rvalue }}</div>
        </div>
        <div class="item-rfm-box">
          <div class="item-rfm-box-label">(F)消费频率评分（每年）</div>
          <div class="item-rfm-box-value"
            style="color: #FFA082">{{ fourData.fvalue }}</div>
        </div>
        <div class="item-rfm-box">
          <div class="item-rfm-box-label">(M)消费金额评分（每年）</div>
          <div class="item-rfm-box-value"
            style="color: #00D1B3">{{ fourData.mvalue }}</div>
        </div>
      </div>
      <div class="show-map-data">
        <editor v-if="tagsShow"
          :valueList="fourDataList"
          :dataInfo="fourData"></editor>
      </div>
    </div>
    <el-dialog title="选择客户标签"
      :visible.sync="tagDialogVisible"
      width="50%">
      <div>
        <el-form ref="forms1"
          :model="formtags"
          label-width="80px">
          <div v-for="(tags, index) in categoryOptions"
            :key="index">
            <el-form-item :label="tags.label"
              v-if="tags.hasOwnProperty('children')">
              <el-checkbox-group v-model="formtags.checkList">
                <el-checkbox :key="ind"
                  v-for="(item, ind) in tags.children"
                  :label="item.value">
                  {{ item.label }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </div>
        </el-form>

        <div slot="footer"
          class="dialog-footer"
          style="display: flex;justify-content: center;">
          <el-button @click="tagDialogVisible = false">取 消</el-button>
          <el-button type="primary"
            @click="updateCustomerTags">确 定</el-button>
        </div>

      </div>

    </el-dialog>
    <div class="product-header"
      style="padding: 10px 0">
      <span style="font-style: normal;"
        class="big_title_style"> 客户标签</span>
    </div>
    <el-form ref="forms2"
      :model="fourData"
      label-width="155px"
      label-position="center"
      size="small"
      style="margin-bottom: 20px;border-bottom: 1px solid #eee;">
      <el-form-item label="客户标签:">
        <el-tag style="margin-right: 10px;"
          :key="index"
          v-for="(tag, index) in fourData.customerTags"
          :disable-transitions="false"
          @close="handleClose(tag)">
          {{ tag.labelName }}
        </el-tag>
        <el-input style="width:200px"
          class="input-new-tag"
          v-if="inputVisible"
          v-model="inputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm">
        </el-input>
        <el-button v-else
          class="button-new-tag"
          size="small"
          @click="showInput">+ 新增</el-button>

      </el-form-item>

      <el-form-item label="潜在标签:">
        <el-tag style="margin-right: 10px;margin-bottom: 10px;"
          :key="index"
          v-for="(tag, index) in fourData.hiddenTages">
          {{ tag.value }} ({{ tag.number }})
        </el-tag>
      </el-form-item>
    </el-form>
    <div style="display: flex">
      <el-form ref="forms"
        :model="fourData"
        label-width="155px"
        label-position="center"
        size="small"
        style="flex: 1;overflow: hidden;">
        <div class="product-header"
          style="padding: 10px 0">
          <span style="font-style: normal;"
            class="big_title_style"> 皮肤概况</span>
        </div>
        <el-form-item label="皮肤干性/油性类型:">
          <span class="show-skin-content-txt">{{ fourData.skinOilType || '' }}</span>
        </el-form-item>
        <el-form-item label="皮肤耐受/敏感类型:">
          <span class="show-skin-content-txt">{{ fourData.skinSensitiveType || '' }}</span>
        </el-form-item>
        <el-form-item label="皮肤色素/非色素测试:">
          {{ fourData.skinColorType || '' }}
        </el-form-item>
        <el-form-item label="皮肤紧致/皱纹测试:">
          <span class="show-skin-content-txt">{{ fourData.skinCompactType || '' }}</span>
        </el-form-item>
        <el-form-item label="不适或病史:">
          <span class="show-skin-content-txt">{{ fourData.medicalHistory || '' }}</span>
        </el-form-item>
        <el-form-item label="不良反应或过敏:">
          <span class="show-skin-content-txt">{{ fourData.allergy || '' }}</span>
        </el-form-item>
      </el-form>

      <div style="flex: 1;overflow: hidden;border-left: 1px solid #eee;padding-left: 15px;margin-left: 15px">
        <div class="product-header"
          style="padding: 10px 0">
          <span style="font-style: normal;"
            class="big_title_style"> 护理记录</span>
        </div>
        <el-table :data="fourData.list"
          border>
          <el-table-column prop="subscribeDate"
            label="时间">
          </el-table-column>
          <el-table-column prop="customerRequirement"
            label="客户诉求">
          </el-table-column>
          <!-- <el-table-column prop="skinProblems"
                      label="皮肤问题">
                    </el-table-column> -->
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import editor from './editor'

import { selectListLimitByCustomerId, categorySelectOptions, addOrEditTags } from "@/api/customer/Info"


export default {
  data () {
    return {
      tagsShow: false,
      categoryOptions: [],
      tagDialogVisible: false,
      inputVisible: false,
      fourDataList: [],
      customerUid: this.$route.params && this.$route.params.customerUid,
      fourData: {
        customerTags: []
      },
      formtags: {
        checkList: [],
      },
    }
  },
  components: { editor },
  created () {
    this.getFourList();
  },
  methods: {
    showInput () {
      categorySelectOptions().then(response => {

        this.categoryOptions = response.data;
        this.tagDialogVisible = true
        console.log(this.categoryOptions)
      })
    },
    updateCustomerTags () {
      let datList = [];
      if (this.formtags.checkList) {
        this.formtags.checkList.forEach(vo => {
          datList.push({ labelId: vo })
        })
      }
      addOrEditTags(this.customerUid, datList).then(response => {
        this.tagDialogVisible = false;
        this.getFourList();
      });
    },
    handleClose (tag) {
      this.fourData.customerTags.splice(this.fourData.customerTags.indexOf(tag), 1);
    },
    handleInputConfirm () {
      let inputValue = this.inputValue;
      if (this.fourData.customerTags) {
        let ind = 0;
        this.fourData.customerTags.forEach(tags => {
          if (tags.labelName == inputValue) {
            ind = 1
          }
        })
        if (ind == 1) {
          this.$message.error("标签重复！重新输入");
          return
        }
      }
      if (inputValue) {
        let data = {
          labelName: inputValue
        }
        this.fourData.customerTags.push(data);
      }
      this.inputVisible = false;
      this.inputValue = '';

    },
    getFourList () {
      selectListLimitByCustomerId(this.customerUid).then(response => {
        this.fourData = response.data
        //  this.$set(this.form, 'checkList', [])
        if (this.fourData) {
          this.fourDataList = []
          this.fourDataList.push(this.fourData.rvalue)
          this.fourDataList.push(this.fourData.fvalue)
          this.fourDataList.push(this.fourData.mvalue)
          // console.log(this.fourDataList, 1111);
          this.tagsShow = true;
          this.fourTableData = [];
          let data = {
            rvalue: this.fourData.rvalue, fvalue: this.fourData.fvalue,
            mvalue: this.fourData.mvalue,
          }
          this.fourTableData.push(data)
          /**
           * 标签
           */
          if (this.fourData.customerTags) {
            this.formtags.checkList = []
            this.fourData.customerTags.forEach(vo => {
              this.formtags.checkList.push(vo.labelId)
            })
          }
        }
      })
      // recirdListByUid(this.customerUid).then(response => {
      //   this.list = response.data;
      // })



    },
  }
}
</script>

<style lang="scss" scoped>
.show-rfm-content {
  display: flex;
  align-content: center;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid #eee;

  .show-num-data {
    flex: 1;
    padding-left: 15px;
    margin-right: 15px;
    min-width: 250px;

    .item-rfm-box {
      padding: 16px 32px;
      background-color: #fff;
      border-radius: 8px;
      border: 1px solid #eee;

      &:not(:last-child) {
        margin-bottom: 15px;
      }

      .item-rfm-box-label {
        font-size: 16px;
        color: #999;
        margin-bottom: 14px;
      }

      .item-rfm-box-value {
        font-size: 30px;
        font-weight: 600;
        line-height: 1;
      }
    }
  }

  .show-map-data {
    flex: 2;
    padding-left: 20px;
  }
}
</style>